<template>

  <el-dialog :title="$t('label_fee_details')" :visible.sync="dialogVisible" width="1200px" destroy-on-close>

    <el-row>
      <el-col :span="12">{{ $t('label_stock_age_day') }}:{{ dayRange }}</el-col>
      <!-- <el-col :span="12">{{ $t('label_sku_type') }}:{{bizType}}</el-col> -->
    </el-row>
    <el-alert style="margin-top: 10px;" :title="$t('tip_tenant_order_detail_formula2')" type="info" :closable="false" />
    <ex_super_table_page style="margin-top: 10px;height: 300px;" v-bind="containerDetailsOption" :data="detailList"
      ref="SuperTablePage" :autoLoad="false" />

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ $t('label_close') }}</el-button>
    </div>

  </el-dialog>
</template>
<script>
import SuperTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
export default {
  mixins: [SuperTablePageFunction, page_table_model_manage],
  data() {
    return {
      dialogVisible: false,
      detailList: [],
      containerDetailsOption: {
        height: 300,
        table: {
          url: "/fms-api/customer/CustomerOrderRpc/queryWarehouseTenantCostDetails.json",
          model: [
            { key: 'skuName', label: 'SKU', 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$formatNameCode(v, r.skuOnlyCode) },
            { key: 'totalQty', label: 'label_total_sku_count', 'show-overflow-tooltip': true, },
            { key: 'qty', label: 'label_fee_total_sku_count', 'show-overflow-tooltip': true, },
            { key: 'skuAge', label: 'label_stock_age_day', 'show-overflow-tooltip': true, },
            { key: 'skuVolume', label: 'label_single_sku_volume', formatter: (r, c, v, i) => this.$addUnit(v, "m³"), 'show-overflow-tooltip': true, },
            { key: 'totalVolume', label: 'label_total_volume', formatter: (r, c, v, i) => this.$addUnit(v, "m³"), 'show-overflow-tooltip': true, },
            { key: 'volume', label: 'label_warehouse_fee_rental_volume', formatter: (r, c, v, i) => this.$addUnit(v, "m³"), 'show-overflow-tooltip': true, },
          ],
        },

      },
      dayRange: '',
      bizType: ''
    }
  },
  methods: {
    show(data) {
      this.dayRange = data.startDay + '-' + data.endDay
      this.bizType = data.bizType
      this.dialogVisible = true

      this.$nextTick(() => {
        this.$refs.SuperTablePage.loadData({ warehouseTenantCostId: data.id })
      })

      // this.$ajax({
      //     url: '/fms-api/customer/CustomerOrderRpc/queryWarehouseTenantCostDetails.json',
      //     method: 'post',
      //     data: { warehouseTenantCostId: data.id },
      //     success: (res) => {
      //       this.loading = false
      //       this.detailList = res.data.rows
      //     }
      //   })
    }
  }
}

</script>
